<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Menu - <span class="subitem">SlideMenu</span>
    </ui:define>

    <ui:define name="description">
        SlideMenu displays nested submenus with a slide animation.
    </ui:define>

    <ui:param name="documentationLink" value="/components/slidemenu" />

    <ui:define name="implementation">
        
        <h:form>
            <p:growl id="messages" showDetail="true"/>

            <p:slideMenu style="width:200px">
                <p:submenu label="Ajax Menuitems" icon="pi pi-refresh">
                    <p:menuitem value="Save" action="#{menuView.save}" update="messages" icon="pi pi-save" />
                    <p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh" />
                </p:submenu>
                <p:submenu label="Non-Ajax Menuitem" icon="pi pi-clone">
                    <p:menuitem value="Delete" action="#{menuView.delete}"  ajax="false" icon="pi pi-times"/>
                </p:submenu>
                <p:separator />
                <p:submenu label="Navigations" icon="pi pi-home">
                    <p:submenu label="Prime Links">
                        <p:menuitem value="Prime" url="http://www.prime.com.tr" />
                        <p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
                    </p:submenu>
                    <p:menuitem value="Mobile" />
                </p:submenu>
            </p:slideMenu>
            
            <p:separator />

            <p:commandButton id="dynaButton" value="Show" type="button" icon="pi pi-home"/>
            <p:slideMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom" style="width:180px">
                <p:submenu label="Ajax Menuitems">
                    <p:menuitem value="Save" action="#{menuView.save}" update="messages" icon="pi pi-save"/>
                    <p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh"/>
                </p:submenu>
                <p:submenu label="Non-Ajax Menuitem">
                    <p:menuitem value="Delete" action="#{menuView.delete}"  ajax="false" icon="pi pi-times"/>
                </p:submenu>
                <p:submenu label="Navigations" icon="pi pi-home">
                    <p:submenu label="Prime Links">
                        <p:menuitem value="Prime" url="http://www.prime.com.tr" />
                        <p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
                    </p:submenu>
                    <p:menuitem value="Mobile" />
                </p:submenu>
            </p:slideMenu>
        </h:form>
        
    </ui:define>

</ui:composition>